<template>
  <div class="profile-page">
    <div class="page-header">
      <h1 class="page-title">👤 个人中心</h1>
      <p class="page-subtitle">管理您的学习信息和偏好设置</p>
    </div>

    <div class="profile-content">
      <!-- 用户信息卡片 -->
      <div class="user-profile-card">
        <div class="profile-header">
          <div class="profile-avatar">
            <img
              :src="avatarUrl"
              :alt="userInfo.name"
              class="avatar-img"
            />
            <div class="avatar-edit" @click="editAvatar">
              <span class="edit-icon">📷</span>
            </div>
            <input
              ref="avatarInput"
              type="file"
              accept="image/*"
              style="display: none"
              @change="onAvatarSelected"
            />
          </div>
          <div class="profile-info">
            <h2 class="user-name">
              {{ userInfo.username }}
              <span
                v-if="genderCode !== 0"
                class="gender-icon"
                :class="{ male: genderCode === 1, female: genderCode === 2 }"
                :title="genderTitle"
              >
                {{ genderSymbol }}
              </span>
            </h2>
            <p class="user-email">{{ userInfo.email }}</p>
            <div class="user-stats">
              <div class="stat-item">
                <span class="stat-number">{{ userInfo.studyDays }}</span>
                <span class="stat-label">学习天数</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ userInfo.totalTime }}</span>
                <span class="stat-label">总学时</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ userInfo.achievements }}</span>
                <span class="stat-label">成就数</span>
              </div>
            </div>
          </div>
          <div class="profile-actions">
            <el-button type="primary" @click="editProfile">
              <span class="btn-icon">✏️</span>
              编辑资料
            </el-button>
          </div>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="profile-sections">
        <!-- 学习目标 -->
        <div class="profile-section">
          <div class="section-header">
            <h2>🎯 学习目标</h2>
            <el-button type="success" @click="setGoal"> 设置目标 </el-button>
          </div>
          <div class="section-content">
            <div class="goals-list">
              <div
                v-for="goal in learningGoals"
                :key="goal.id"
                class="goal-item"
              >
                <div class="goal-info">
                  <h3 class="goal-title">{{ goal.title }}</h3>
                  <p class="goal-desc">{{ goal.description }}</p>
                  <div class="goal-progress">
                    <div class="progress-bar">
                      <div
                        class="progress-fill"
                        :style="{ width: goal.progress + '%' }"
                      ></div>
                    </div>
                    <span class="progress-text">{{ goal.progress }}%</span>
                  </div>
                </div>
                <div class="goal-status">
                  <span class="goal-deadline">截止: {{ goal.deadline }}</span>
                  <el-button
                    :type="goal.completed ? 'success' : 'primary'"
                    size="small"
                    @click="toggleGoal(goal)"
                  >
                    {{ goal.completed ? "已完成" : "标记完成" }}
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 成就勋章 -->
        <div class="profile-section">
          <div class="section-header">
            <h2>🏆 成就勋章</h2>
            <el-button type="warning" @click="viewAllAchievements">
              查看全部
            </el-button>
          </div>
          <div class="section-content">
            <div class="achievements-grid">
              <div
                v-for="achievement in achievements"
                :key="achievement.id"
                class="achievement-item"
                :class="{ unlocked: achievement.unlocked }"
                @click="viewAchievement(achievement)"
              >
                <div class="achievement-icon">
                  <span class="medal-icon">{{ achievement.icon }}</span>
                  <div v-if="achievement.unlocked" class="unlock-badge">✓</div>
                </div>
                <div class="achievement-info">
                  <h3 class="achievement-title">{{ achievement.title }}</h3>
                  <p class="achievement-desc">{{ achievement.description }}</p>
                  <span class="achievement-date" v-if="achievement.unlocked">
                    获得于 {{ achievement.unlockDate }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习统计 -->
        <div class="profile-section">
          <div class="section-header">
            <h2>📊 学习统计</h2>
            <el-select
              v-model="timeRange"
              placeholder="选择时间范围"
              size="small"
            >
              <el-option label="最近7天" value="7"></el-option>
              <el-option label="最近30天" value="30"></el-option>
              <el-option label="最近90天" value="90"></el-option>
            </el-select>
          </div>
          <div class="section-content">
            <div class="stats-grid">
              <div class="stat-card">
                <div class="stat-header">
                  <span class="stat-icon">📚</span>
                  <h3>学习时长</h3>
                </div>
                <div class="stat-value">{{ studyStats.totalTime }}小时</div>
                <div class="stat-trend">
                  <span class="trend-icon">📈</span>
                  <span class="trend-text"
                    >+{{ studyStats.timeIncrease }}%</span
                  >
                </div>
              </div>

              <div class="stat-card">
                <div class="stat-header">
                  <span class="stat-icon">🎯</span>
                  <h3>正确率</h3>
                </div>
                <div class="stat-value">{{ studyStats.accuracy }}%</div>
                <div class="stat-trend">
                  <span class="trend-icon">📈</span>
                  <span class="trend-text"
                    >+{{ studyStats.accuracyIncrease }}%</span
                  >
                </div>
              </div>

              <div class="stat-card">
                <div class="stat-header">
                  <span class="stat-icon">🔥</span>
                  <h3>连续学习</h3>
                </div>
                <div class="stat-value">{{ studyStats.streak }}天</div>
                <div class="stat-trend">
                  <span class="trend-icon">📈</span>
                  <span class="trend-text"
                    >+{{ studyStats.streakIncrease }}天</span
                  >
                </div>
              </div>

              <div class="stat-card">
                <div class="stat-header">
                  <span class="stat-icon">📝</span>
                  <h3>完成题目</h3>
                </div>
                <div class="stat-value">
                  {{ studyStats.completedQuestions }}
                </div>
                <div class="stat-trend">
                  <span class="trend-icon">📈</span>
                  <span class="trend-text"
                    >+{{ studyStats.questionIncrease }}%</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 设置 -->
        <div class="profile-section">
          <div class="section-header">
            <h2>⚙️ 设置</h2>
          </div>
          <div class="section-content">
            <div class="settings-list">
              <div class="setting-item">
                <div class="setting-info">
                  <h3>修改密码</h3>
                  <p>更新您的登录密码</p>
                </div>
                <el-button type="primary" size="small" @click="changePassword">
                  修改
                </el-button>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h3>通知设置</h3>
                  <p>管理学习提醒和通知</p>
                </div>
                <el-button
                  type="primary"
                  size="small"
                  @click="notificationSettings"
                >
                  设置
                </el-button>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h3>学习偏好</h3>
                  <p>自定义学习模式和难度</p>
                </div>
                <el-button
                  type="primary"
                  size="small"
                  @click="learningPreferences"
                >
                  设置
                </el-button>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h3>隐私设置</h3>
                  <p>管理个人信息可见性</p>
                </div>
                <el-button type="primary" size="small" @click="privacySettings">
                  设置
                </el-button>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h3>数据导出</h3>
                  <p>导出您的学习数据</p>
                </div>
                <el-button type="success" size="small" @click="exportData">
                  导出
                </el-button>
              </div>

              <div class="setting-item danger">
                <div class="setting-info">
                  <h3>删除账户</h3>
                  <p>永久删除您的账户和数据</p>
                </div>
                <el-button type="danger" size="small" @click="deleteAccount">
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑资料对话框 -->
    <el-dialog
      title="编辑个人资料"
      :visible.sync="editDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="edit-form-container">
        <el-form
          :model="editForm"
          :rules="editRules"
          ref="editForm"
          label-width="80px"
          label-position="left"
        >
          <!-- 基本信息 -->
          
            <h3 class="form-section-title">📋 基本信息</h3>

            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="editForm.name"
                placeholder="请输入您的姓名"
                maxlength="20"
                show-word-limit
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="editForm.email"
                placeholder="请输入您的邮箱"
                type="email"
                prefix-icon="el-icon-message"
              ></el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="editForm.phone"
                placeholder="请输入您的手机号"
                maxlength="11"
                prefix-icon="el-icon-phone"
              ></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="editForm.gender">
                <el-radio :label="1">👨 男</el-radio>
                <el-radio :label="2">👩 女</el-radio>
                <el-radio :label="0">🟰 未知</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                v-model="editForm.birthday"
                type="date"
                placeholder="选择生日"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%"
                prefix-icon="el-icon-date"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="所在城市" prop="city">
              <el-input
                v-model="editForm.city"
                placeholder="请输入您所在的城市"
                maxlength="20"
                prefix-icon="el-icon-location"
              ></el-input>
            </el-form-item>

            <el-form-item label="个人简介" prop="bio">
              <el-input
                v-model="editForm.bio"
                type="textarea"
                :rows="4"
                placeholder="介绍一下自己吧...让其他学习者更好地了解你"
                maxlength="200"
                show-word-limit
              ></el-input>
            </el-form-item>
        </el-form>
      </div>

      <el-button @click="cancelEdit">取消</el-button>
      <el-button type="primary" @click="saveProfile" :loading="saving">
        保存
      </el-button>
    </el-dialog>

    <!-- 头像裁剪对话框 -->
    <el-dialog
      title="裁剪头像"
      :visible.sync="cropDialogVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="crop-container">
        <div ref="cropContainer" class="crop-area"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cropDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmCrop">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateUserProfile, uploadAvatar, getUser } from "@/api/user.js";
import { getAvatarUrl } from "@/utils/avatar.js";

export default {
  name: "UserProfile",
  data() {
    return {
      timeRange: "30",
      // 编辑对话框相关
      editDialogVisible: false,
      cropDialogVisible: false,
      saving: false,
      avatarUploading: false,
      editForm: {
        name: "",
        email: "",
        phone: "",
        avatar: "",
        gender: "",
        birthday: "",
        bio: "",
        city: "",
        profession: "",
        learningPreferences: [],
      },
      // 表单验证规则
      editRules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "姓名长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        phone: [
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        gender: [
          {
            validator: (rule, value, callback) => {
              const num = typeof value === "string" ? parseInt(value, 10) : value;
              if ([0, 1, 2].includes(num)) {
                callback();
              } else {
                callback(new Error("请选择性别"));
              }
            },
            trigger: "change",
          },
        ],
      },
      userInfo: {
        id: "",
        username: "",
        email: "",
        gender: 0,
        avatar: "",
        studyDays: 0,
        totalTime: 0,
        achievements: 0,
      },
      learningGoals: [
        {
          id: 1,
          title: "完成算法基础学习",
          description: "掌握常见算法和数据结构",
          progress: 75,
          deadline: "2024-02-15",
          completed: false,
        },
        {
          id: 2,
          title: "网络协议深入理解",
          description: "深入学习TCP/IP协议栈",
          progress: 45,
          deadline: "2024-03-01",
          completed: false,
        },
        {
          id: 3,
          title: "数据库优化实践",
          description: "完成数据库性能优化项目",
          progress: 100,
          deadline: "2024-01-20",
          completed: true,
        },
      ],
      achievements: [
        {
          id: 1,
          title: "学习新手",
          description: "完成第一次学习",
          icon: "🎓",
          unlocked: true,
          unlockDate: "2024-01-01",
        },
        {
          id: 2,
          title: "坚持不懈",
          description: "连续学习7天",
          icon: "🔥",
          unlocked: true,
          unlockDate: "2024-01-07",
        },
        {
          id: 3,
          title: "算法达人",
          description: "完成100道算法题",
          icon: "🧮",
          unlocked: false,
        },
        {
          id: 4,
          title: "网络专家",
          description: "掌握所有网络协议",
          icon: "🌐",
          unlocked: false,
        },
        {
          id: 5,
          title: "数据库大师",
          description: "完成数据库高级课程",
          icon: "🗄️",
          unlocked: true,
          unlockDate: "2024-01-15",
        },
        {
          id: 6,
          title: "完美主义者",
          description: "单次测试获得满分",
          icon: "💯",
          unlocked: false,
        },
      ],
      studyStats: {
        totalTime: 128,
        timeIncrease: 15,
        accuracy: 85,
        accuracyIncrease: 8,
        streak: 12,
        streakIncrease: 3,
        completedQuestions: 456,
        questionIncrease: 25,
      },
    };
  },
  computed: {
    avatarUrl() {
      return getAvatarUrl(this.userInfo && this.userInfo.avatar);
    },
    genderCode() {
      const value = this.userInfo && this.userInfo.gender;
      const num = typeof value === "string" ? parseInt(value, 10) : value;
      return Number.isNaN(num) ? 0 : (num || 0);
    },
    genderTitle() {
      return this.genderCode === 1 ? "男" : this.genderCode === 2 ? "女" : "未知";
    },
    genderSymbol() {
      return this.genderCode === 1 ? "♂" : this.genderCode === 2 ? "♀" : "";
    },
  },
  async mounted() {
    await this.loadUserInfo();
  },
  methods: {
    // 加载用户信息
    async loadUserInfo() {
      try {
        // 从store获取用户ID，如果没有则从localStorage获取
        const userId = this.$store.state.user?.userId || 
                      this.$store.state.user?.id || 
                      localStorage.getItem("userId") || 
                      "1";
        const response = await getUser(userId);

        if (response.data) {
          this.userInfo = {
            ...this.userInfo,
            ...response.data,
          };
        }
      } catch (error) {
        console.error("加载用户信息失败:", error);
        // 如果获取失败，使用默认数据
        this.$message.warning("加载用户信息失败，显示默认信息");
      }
    },
    editAvatar() {
      if (this.$refs && this.$refs.avatarInput) {
        this.$refs.avatarInput.click();
      }
    },
    async onAvatarSelected(event) {
      try {
        const file = event && event.target && event.target.files && event.target.files[0];
        if (!file) return;
        // 校验文件
        const valid = this.beforeAvatarUpload(file);
        if (!valid) {
          // 重置选择，避免同名文件无法再次触发change
          event.target.value = '';
          return;
        }

        this.avatarUploading = true;
        this.$message.info("正在上传头像...");

        // 上传文件获取URL
        const uploadRes = await uploadAvatar(file, this.userInfo.id);
        const url = uploadRes && uploadRes.data && (uploadRes.data.url || uploadRes.data.avatar || uploadRes.data);
        
        // 更新本地数据以便立即预览
        this.userInfo.avatar = url;
        this.editForm.avatar = url;
        
        // 更新store中的用户信息
        const currentUser = this.$store.state.user;
        if (currentUser) {
          const updatedUser = { ...currentUser, avatar: url };
          this.$store.commit('setUser', updatedUser);
          localStorage.setItem('user', JSON.stringify(updatedUser));
        }
        
        // 重新拉取一次用户信息，确保其他字段最新
        await this.loadUserInfo();
      } catch (err) {
        console.error('更新头像失败:', err);
        this.$message.error("更新头像失败，请重试");
      } finally {
        this.avatarUploading = false;
        // 重置选择器，允许重复选择同一文件
        if (event && event.target) event.target.value = '';
      }
    },
    editProfile() {
      // 初始化编辑表单数据
      this.editForm = {
        id: this.userInfo.id,
        name: this.userInfo.username,
        email: this.userInfo.email,
        phone: this.userInfo.phone || "",
        avatar: this.userInfo.avatar,
        gender: this.genderCode,
        birthday: this.userInfo.birthday || "",
        bio: this.userInfo.bio || "",
        city: this.userInfo.city || "",
        profession: this.userInfo.profession || "",
        learningPreferences: this.userInfo.learningPreferences || [],
      };
      this.editDialogVisible = true;
    },
    cancelEdit() {
      this.editDialogVisible = false;
    },
    async saveProfile() {
      try {
        // 表单验证
        await this.$refs.editForm.validate();
        this.saving = true;

        // 调用API保存用户资料并根据返回结构判断是否成功
        const res = await updateUserProfile(this.editForm);
        if (res && res.code === 200) {
          // 成功后重新获取用户信息，确保展示后端最新数据
          await this.loadUserInfo();
          this.editDialogVisible = false;
          this.$message.success(res.message || "保存成功！");
        } else {
          this.$message.error((res && res.message) || "保存失败，请检查输入信息");
        }
      } catch (error) {
        console.error("保存用户资料失败:", error);
        this.$message.error("保存失败，请检查输入信息");
      } finally {
        this.saving = false;
      }
    },
    // 头像上传相关方法
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG/GIF 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      return true;
    },
    async handleAvatarUpload(options) {
      try {
        const response = await uploadAvatar(options.file);
        this.editForm.avatar = response.data.url;
        this.$message.success("头像上传成功");
      } catch (error) {
        console.error("头像上传失败:", error);
        this.$message.error("头像上传失败，请重试");
      }
    },
    confirmCrop() {
      // 头像裁剪确认逻辑
      this.cropDialogVisible = false;
      this.$message.success("头像裁剪完成");
    },
    setGoal() {
      this.$message.info("设置学习目标");
    },
    toggleGoal(goal) {
      if (!goal.completed) {
        goal.completed = true;
        goal.progress = 100;
        this.$message.success(`恭喜完成目标: ${goal.title}`);
      } else {
        goal.completed = false;
        this.$message.info(`取消完成状态: ${goal.title}`);
      }
    },
    viewAllAchievements() {
      this.$message.info("查看全部成就");
    },
    viewAchievement(achievement) {
      if (achievement.unlocked) {
        this.$message.info(`查看成就: ${achievement.title}`);
      } else {
        this.$message.info(`未解锁成就: ${achievement.title}`);
      }
    },
    changePassword() {
      this.$message.info("修改密码");
    },
    notificationSettings() {
      this.$message.info("通知设置");
    },
    learningPreferences() {
      this.$message.info("学习偏好设置");
    },
    privacySettings() {
      this.$message.info("隐私设置");
    },
    exportData() {
      this.$message.success("开始导出数据");
    },
    deleteAccount() {
      this.$confirm("确定要删除账户吗？此操作不可恢复。", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success("账户已删除");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
};
</script>

<style scoped>
.profile-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 1.1rem;
  color: #7f8c8d;
}

/* 用户信息卡片 */
.user-profile-card {
  background: #e3f2fd;
  color: #1976d2;
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(25, 118, 210, 0.15);
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 30px;
}

.profile-avatar {
  position: relative;
  flex-shrink: 0;
}

.avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  object-fit: cover;
}

.avatar-edit {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-edit:hover {
  background: white;
  transform: scale(1.1);
}

.edit-icon {
  font-size: 1rem;
}

.profile-info {
  flex: 1;
}

.user-name {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 5px 0;
  display: inline-flex;
  align-items: baseline;
}

.gender-icon {
  margin-left: 8px;
  font-size: 1.4rem;
  vertical-align: baseline;
  display: inline-block;
  line-height: 1;
}

.gender-icon.male {
  color: #1976d2;
}

.gender-icon.female {
  color: #d81b60;
}

.user-email {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0 0 20px 0;
}

.user-stats {
  display: flex;
  gap: 30px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.profile-actions {
  flex-shrink: 0;
}

.btn-icon {
  margin-right: 5px;
}

/* 主要内容区域 */
.profile-sections {
  display: grid;
  gap: 30px;
}

.profile-section {
  background: white;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #2c3e50;
}

/* 学习目标 */
.goals-list {
  display: grid;
  gap: 15px;
}

.goal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.goal-item:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.goal-info {
  flex: 1;
}

.goal-title {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  color: #2c3e50;
}

.goal-desc {
  margin: 0 0 15px 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.goal-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: #e1e8ed;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #1e3a8a 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #3b82f6;
  min-width: 40px;
}

.goal-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.goal-deadline {
  font-size: 0.85rem;
  color: #7f8c8d;
}

/* 成就勋章 */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.achievement-item.unlocked {
  opacity: 1;
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.achievement-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.achievement-icon {
  position: relative;
  flex-shrink: 0;
}

.medal-icon {
  font-size: 2.5rem;
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.achievement-item.unlocked .medal-icon {
  filter: grayscale(0);
}

.unlock-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background: #27ae60;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.achievement-info {
  flex: 1;
}

.achievement-title {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  color: #2c3e50;
}

.achievement-desc {
  margin: 0 0 5px 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.achievement-date {
  font-size: 0.8rem;
  color: #27ae60;
  font-weight: 600;
}

/* 学习统计 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
  transform: translateY(-2px);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.stat-icon {
  font-size: 1.5rem;
}

.stat-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #2c3e50;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 10px;
}

.stat-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.9rem;
  color: #27ae60;
}

.trend-icon {
  font-size: 1rem;
}

/* 设置 */
.settings-list {
  display: grid;
  gap: 15px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.setting-item:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.setting-item.danger:hover {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.05);
}

.setting-info h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  color: #2c3e50;
}

.setting-info p {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

/* 编辑资料对话框样式 */
.avatar-upload-section {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 30px;
  padding: 25px;
  background: #e9ecef;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.current-avatar {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.preview-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.preview-avatar:hover {
  transform: scale(1.05);
  border-color: #667eea;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.avatar-uploader {
  flex: 1;
  position: relative;
  z-index: 1;
}

.avatar-uploader .el-button {
  background: #667eea;
  border: 2px solid #667eea;
  color: white;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.avatar-uploader .el-button:hover {
  background: #5a6fd8;
  border-color: #5a6fd8;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.crop-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.crop-area {
  width: 300px;
  height: 300px;
  border: 2px dashed #d9d9d9;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  transition: all 0.3s ease;
}

.crop-area:hover {
  border-color: #667eea;
  background: linear-gradient(135deg, #f0f2ff 0%, #e6ebff 100%);
}

/* 表单样式优化 */
.edit-form-container {
  border-radius: 20px;
  padding: 30px;
}

.form-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-section-title::before {
  content: "";
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.el-form-item {
  margin-bottom: 25px;
  position: relative;
}

.el-form-item__label {
  font-weight: 700;
  color: #2c3e50;
  font-size: 15px;
  margin-bottom: 8px;
  display: block;
  position: relative;
}

.el-form-item__label::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 1px;
}

.el-input__inner,
.el-textarea__inner {
  border-radius: 12px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s ease;
  padding: 12px 16px;
  font-size: 14px;
  background: #fafbfc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1),
    0 4px 15px rgba(102, 126, 234, 0.2);
  transform: translateY(-1px);
}

.el-input__inner:hover,
.el-textarea__inner:hover {
  border-color: #b8c5ff;
  background: white;
}

.el-radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 15px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 12px;
  border: 1px solid #e1e8ed;
}

.el-radio {
  margin-right: 0;
}

.el-radio__label {
  font-size: 14px;
  color: #2c3e50;
  font-weight: 500;
  padding-left: 8px;
}

.el-radio__input.is-checked .el-radio__inner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
}


.el-date-editor {
  width: 100% !important;
}

.el-date-editor .el-input__inner {
  background: #fafbfc;
  border-radius: 12px;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 25px 30px;
  position: relative;
  overflow: hidden;
}

.el-dialog__header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="header-grain" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23header-grain)"/></svg>');
  opacity: 0.4;
}

.el-dialog__title {
  color: white;
  font-weight: 700;
  font-size: 20px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-dialog__title::before {
  content: "✏️";
  font-size: 24px;
}

.el-dialog__headerbtn {
  top: 25px;
  right: 30px;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.el-dialog__headerbtn .el-dialog__close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.el-dialog__body {
  padding: 0;
  max-height: 75vh;
  overflow-y: auto;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.dialog-footer {
  background: white;
  padding: 25px 30px;
  border-top: 1px solid #e1e8ed;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}

.dialog-footer .el-button {
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
  min-width: 100px;
}

.dialog-footer .el-button--default {
  background: #f8f9fa;
  border: 2px solid #e1e8ed;
  color: #6c757d;
}

.dialog-footer .el-button--default:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dialog-footer .el-button--primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
}

.dialog-footer .el-button--primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.dialog-footer .el-button--primary.is-loading {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-page {
    padding: 15px;
  }

  .page-title {
    font-size: 2rem;
  }

  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .user-stats {
    justify-content: center;
  }

  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .goal-item {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .goal-status {
    align-items: flex-start;
  }

  .achievements-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .setting-item {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  /* 编辑对话框移动端样式 */
  .el-dialog {
    width: 95% !important;
    margin: 5vh auto !important;
    border-radius: 15px !important;
  }

  .el-dialog__header {
    padding: 20px;
  }

  .el-dialog__title {
    font-size: 18px;
  }

  .el-dialog__body {
    max-height: 65vh;
  }

  .edit-form-container {
    padding: 20px;
  }

  .avatar-upload-section {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 20px;
  }

  .preview-avatar {
    width: 80px;
    height: 80px;
  }

  .form-section-title {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .el-form-item {
    margin-bottom: 20px;
  }


  .dialog-footer {
    padding: 20px;
    flex-direction: column;
    gap: 10px;
  }

  .dialog-footer .el-button {
    width: 100%;
    margin: 0;
    padding: 14px 30px;
  }
}

@media (max-width: 480px) {
  .user-stats {
    flex-direction: column;
    gap: 15px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>
